<template>
	<div>
		<div class="container">
			<div class="header">
				<headerLink></headerLink>
			</div>
			<div class="body">
				<div class="left">
					<div class="left1">
						<basics></basics>
					</div>
					<div class="left2 ">
						<top10></top10>
					</div>
					<div class="left3 ">
						<park2></park2>
					</div>
				</div>
				<div class="center">
					<div class="center1">
						<chinaMap3></chinaMap3>
					</div>
					<div class="center2">
						<basicData4 ref="basicData4"></basicData4>
					</div>
				</div>
				<div class="right">
					<div class="right1">
						<abnormalboard></abnormalboard>
					</div>
					<div class="right2">
						<maintainboard></maintainboard>
					</div>
					<div class="right3">
						<hot></hot>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import headerLink from './components/header3'
	import chinaMap3 from './components/chinaMap3'
	import abnormalboard from './components/abnormal_board'
	import maintainboard from './components/maintain_board'
	import top10 from './components/top10'
	import park from './components/park'
	import park2 from './components/park2'
	import basics from './components/basics'
	import basicData3 from './components/basicData3'
    import hot from './components/hot'
    import basicData4 from './components/basicData4'
	export default {
		components: {
			headerLink,
			chinaMap3,
			abnormalboard,
			maintainboard,
			top10,
			park,
			park2,
			basics,
			basicData3,
			basicData4,
			hot
		},
		data() {
			return {
				timer: null
			}
		},
		created() {
			//初次加载进入全屏模式.
//			setTimeout(() => {
//				this.launchIntoFullscreen(document.documentElement);
//			}, 0)

		},
		beforeDestroy() {
			clearInterval(this.timer)
		},
		mounted() {
			let that = this
//			this.timer = setInterval(function() {
//				that.init()
//			}, 2000)
//			this.init()
		},
		methods: {
			launchIntoFullscreen(element) {
				if(element.requestFullscreen) {
					element.requestFullscreen();
				} else if(element.mozRequestFullScreen) {
					element.mozRequestFullScreen();
				} else if(element.webkitRequestFullscreen) {
					element.webkitRequestFullscreen();
				} else if(element.msRequestFullscreen) {
					element.msRequestFullscreen();
				}
			},
			init() {
				getNum().then(res => {
					this.$refs.chinaMap.init(res.data.data.totalNum, res.data.data.userNum)
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		position: absolute;
		display: flex;
		flex-direction: column;
        background-image: url(/img/bigScreen/16.png);
        background-repeat: no-repeat;
        background-color: '#1d285d';		
		background-size: 100% 100%;
		width: 100%;
		::-webkit-scrollbar {
			display: none;
		}
		* {
			box-sizing: border-box;
		}
	}
	.header {
		height: 86px;	
		margin-bottom: 10px;	
	}	
	.body {
		height: 984px;
		display: flex;
		justify-content: space-between;
		.left {
			width: 27%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.left1 {
				height:20.3%;
			}
			.left2 {
				height:42.3%;
			}

			.left3 {
				height: 36%;
			}
		}
		.center {
			width: 45%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.center1 {
				height: 63.3%;
			}
			.center2 {
				height: 36%;
			}
		}
		.right {
			width: 27%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.right1 {
				height: 31.3%;
			}
			.right2 {
				height: 31.3%;
			}
			.right3 {
				height: 36%;
			}
		}
	}	
</style>